<template>
    <FIModel v-model="visible" width="500" title="修改信息" @close="closeClick">
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="editData"
          :rules="registerRules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
        <el-form-item label="用户账号" prop="loginName">
          <FIInput v-model="editData.loginName" clearable :disabled="true"/>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName">
          <FIInput v-model="editData.userName" clearable />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="editData.gender">
            <el-radio value="1">男</el-radio>
            <el-radio value="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <FIInput v-model="editData.mobile" clearable />
        </el-form-item>
        <el-form-item label="电子邮件" prop="email">
          <FIInput v-model="editData.email" clearable />
        </el-form-item>
        <el-form-item label="固定电话" prop="businessPhone">
          <FIInput v-model="editData.businessPhone" clearable />
        </el-form-item>
        <el-form-item label="工号" prop="jobNo">
          <FIInput v-model="editData.jobNo" clearable />
        </el-form-item>  
        
      </el-form>
      <template #footer>
          <slot name="footer">
            <div class="dialog-footer">
              <FIButton id="cancelUpdate" border @click="closeClick">取消</FIButton>
              <FIButton id="update" border @click="saveFunc(ruleFormRef)"> 确定 </FIButton>
            </div>
          </slot>
        </template>
    </FIModel>
</template>
  <script lang="ts" setup>
  import { reactive, onMounted, ref, computed, watch,toRaw } from 'vue'
  import type { FormInstance } from 'element-plus'
  import FIFormItem from '@/components/FIFormItem.vue'
  import FIInput from '@/components/FIInput.vue'
  import FIForm from '@/components/FIForm.vue'
  import FIModel from '@/components/FIModel.vue'
  import { apiUpdateInfo } from '@/api/user'
  import { useMessage} from '@/hooks/message'
  import { apiRequestPost } from '@/api/globalApi.js'
  import { useRoute } from 'vue-router'
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance() // 获取当前组件实例上下文
  const route = useRoute()
  const emits = defineEmits(['close','update:editShow','get-list'])
  const props = defineProps({
    editShow: {
        type: Boolean,
        default: false,
    },
    editData:{
        type: Object,
        default: ()=>{
            return  {
              
            }
        },
    }
  
})
const newData = ref({})
  // const register = reactive({
  //   userName: '',
  //   password: '',
  //   loginName: '',
  //   mobile: '',
  //   gender: '',
  //   email: '',
  //   businessPhone:'',
  //   jobNo:'',
  //   deptId:'',
  // })
  let visible: any = computed({
    get() {
        return props.editShow
    },
    set(val) {
        emits('update:editShow', val)
    },
    })
    const validatePhone = (rule, value, callback) => {
      const phonePattern = /^1[3-9]\d{9}$/; // 中国大陆手机号验证规则
      if (!value) {
        callback(new Error('请输入手机号'));
      } else if (!phonePattern.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
  const registerRules = reactive({
    loginName: [{ required: true, message: '此为必填项', trigger: 'blur' }],
    userName:[{ required: true, message: '此为必填项', trigger: 'blur' }],
    mobile:[{ required: true,validator: validatePhone, trigger: 'blur' }],
    email:[
      {required: true,message: '此为必填项',trigger: 'blur',},
      {type: 'email',message: '请输入正确的email地址',trigger: ['blur', 'change'],}
    ]
  })
  const ruleFormRef = ref<FormInstance>()
  const closeClick = () =>{
    emits('update:editShow', false)
  }
  const saveFunc = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        
        const apiUrl = proxy.$Button_api('update', route.name)
        apiRequestPost(apiUrl,props.editData)
        .then((res) => {
          if(res.data.success){
            emits('get-list')
            useMessage().success(res.data.message)
            emits('update:editShow', false)
            
          }
        })
        .catch((error: any) => {
          
        })
      }
    })
  }
  watch(props.editData, (newData, oldData) => {
    },
    { immediate: true }
  );
  </script>
<style lang="less" scoped>
</style>
  